import React, { useState } from "react";
import { useDispatch } from "react-redux";
import { PrimaryButton, Stack, TextField, Text } from "@fluentui/react";
import { login } from "./actions";

function Login() {
  const [username, setUsername] = useState("");
  const dispatch = useDispatch();

  const handleLogin = () => {
    if (username) dispatch(login(username));
  };

  return (
    <Stack
      tokens={{ childrenGap: 10 }}
      styles={{ root: { padding: 20, maxWidth: 400, margin: "auto" } }}
    >
      <Text variant="xxLarge">Login to OA system</Text>
      <TextField
        label="Username"
        value={username}
        onChange={(e, newValue) => setUsername(newValue)}
      />
      <PrimaryButton text="Login" onClick={handleLogin} />
    </Stack>
  );
}
export default Login;